<script>
import request from "../../../utils/request"
import numberUtils from "../../../utils/numberUtils"
import { getShowImage, handleMoney, handleUrlParams, showModal } from "../../../utils"
import information from "./information"
import shareInfo from "../../../utils/shareInfo"
import pay from "@/utils/pay"

export default {
  name: "index",
  methods: { 
		handleMoney,
		getShowImage,
	},
  computed: {
    information() {
      return information
    },
    numberUtils() {
      return numberUtils
    },
  },
  data() {
    return {
      queryParams: {
        id: "",
      },
      detail: null,
      openIosPay: false,
    }
  },
  onLoad(options) {
    this.queryParams.id = options.id
    pay.checkIosPay().then((res) => {
      this.openIosPay = res
      if (!res) {
        showModal({
          title: "提示",
          content: "应相关政策要求，ios 不提供此服务",
          showCancel: false,
        }).then(() => {
          uni.navigateBack()
        })
      }
    })
  },
  onShow() {
    //获取资料库详情
    request({
      url: "information/getInformationDetail",
      data: this.queryParams,
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.detail = data
    })
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getTJGShareInfo({
      path: handleUrlParams("/shopping/pages/informationDetail/index", {
        id: this.queryParams.id,
      }),
      imageUrl: this.detail.previewPictures ? this.getShowImage(this.detail.previewPictures) : undefined,
      title: this.detail.title,
    })
  },
}
</script>

<template>
  <view class="page" v-if="detail && openIosPay">
    <view class="info">
      <!--			标题-->
      <view class="title">{{ detail.title }}</view>
      <!--			下载量-->
      <view class="download-count">{{ detail.downloadVolume + detail.virtualDownloadVolume }}人下载</view>
      <!--			上传时间-->
      <view class="upload-time item" v-if="detail.createTime">
        <view class="label">上传时间：</view>
        <view class="value">{{ detail.createTime }}</view>
      </view>
      <!--			文件大小-->
      <view class="file-size item" v-if="detail.fileSize">
        <view class="label">文件大小：</view>
        <view class="value">{{ numberUtils.bytesToMB(detail.fileSize) }}</view>
      </view>
      <!--			文件格式-->
      <view class="fileExt item" v-if="detail.fileExt">
        <view class="label">文件格式：</view>
        <view class="value">{{ detail.fileExt }}</view>
      </view>
      <!--			资料类型-->
      <view class="item" v-if="detail.informationTypeName">
        <view class="label">资料类型：</view>
        <view class="value">{{ detail.informationTypeName }}</view>
      </view>
      <!--			年份-->
      <view class="item" v-if="detail.year">
        <view class="label">年份：</view>
        <view class="value">{{ detail.year }}</view>
      </view>
    </view>
    <template v-if="detail.previewPictures">
      <view class="divider-line"></view>
      <!--		海报（预览图）-->
      <image class="poster" :src="getShowImage(detail.previewPictures)" mode="widthFix"></image>
    </template>
    <view class="placeholder"></view>
    <!--		底部按钮-->
    <view class="footer-btn">
      <!--			资料是解锁状态-->
      <!--			下载按钮-->
      <view class="download-btn btn" v-if="detail.isLock === false" @click="information.download(detail.id)">下载</view>
      <!--			资料是锁住状态-->
      <template v-else>
        <!--			单独购买按钮-->
        <view
          class="buy-btn btn"
          v-if="['MemberFreeOrBuy', 'BuyAndMemberDeduction'].includes(detail.feeRules)"
          @click="$uni.navigateTo({ url: '/shopping/pages/takeOrder/information?id=' + detail.id })"
        >
          单独购买 ￥{{ handleMoney(detail.price) }}
        </view>
        <!--			开通会员按钮-->
        <view
          class="open-vip-btn btn"
          v-if="['MemberFree', 'MemberFreeOrBuy'].includes(detail.feeRules)"
          @click="$uni.navigateTo({ url: '/pages/mine/vipList' })"
          >开通会员免费下载
        </view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  .info {
    padding: 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 50rpx;
    }

    .download-count {
      font-size: 30rpx;
      color: var(--text-color-light);
      margin-top: 20rpx;
    }

    .item {
      margin-top: 10rpx;
      color: var(--text-color-light);
      font-size: 30rpx;
      display: flex;
    }
  }

  .divider-line {
    height: 20rpx;
    background: var(--gray-background-color);
  }

  .poster {
    width: 100%;
  }

  .footer-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: {
      left: 30rpx;
      right: 30rpx;
      top: 30rpx;
      bottom: calc(60rpx + env(safe-area-inset-bottom));
    }

    .btn {
      height: 90rpx;
      border-radius: 45rpx;
      width: 0;
      flex: 1;

      &:not(:last-child) {
        margin-right: 20rpx;
      }

      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      max-width: 50vw;

      &.download-btn {
        background: #2874a6;
        color: white;
      }

      &.buy-btn {
        background: #e67e22;
        color: white;
      }

      &.open-vip-btn {
        background: #c0392b;
        color: white;
      }
    }
  }
}
</style>
